<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>用户中心</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<style>
			.item_div {
				height: 60px;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: #E1E1E1 1px solid;
			}
			
			.item_box_p1 {
				line-height: 40px;
				padding-left: 10px;
				color: #666666;
				flex-grow: 1;
			}
			
			.item_box_p2 {
				width: 90px;
				padding: 10px;
			}
			
			.hui-icons {
				color: #666666;
			}
		</style>
	</head>

	<body>
		<header class="hui-header" style="height: 50px; max-height: 50px; background: #464646;">
			<div style="height: 22px;background: #464646;"></div>
			<div id="hui-back" style="line-height: 50px;"></div>
			<h1 style="line-height: 50px;">用户中心</h1>
			<div id="hui-right" style="line-height: 50px;"></div>
		</header>
		<div class="hui-wrap" id="datas">

			<div class="hui-list" style="background:#FFFFFF; margin-top:28px;" id="datas">
				<template v-for="(column,index) in list">
					<div @click="onDivSelect(index,column)" class="item_div">
						<p class="item_box_p1">{{column.Name}}</p>
						<div class="item_box_p2" v-html="getSwitchBox(column)">

						</div>
					</div>

				</template>

			</div>

			<div style="background:#FFFFFF; padding: 16px;margin-top: 28px;">
				<button type="button" class="hui-button hui-button-large hui-primary" onclick="save()">
        			保存设置
       			</button>
			</div>
		</div>
		<script type="text/javascript" src="js/func/hui.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/func/vue.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/func/jq.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/obj/my.js" charset="UTF-8"></script>

		<script>
			var isSaved = false;
			var datas = new Vue({
				el: '#datas',
				data: {
					list: [],

				},
				methods: {
					getSwitchBox: function(column) {
						console.log(column)
						var html = '<div class="hui-switch hui-switch-on"><span>显示</span><div class="hui-switch-in"></div></div>';

						if(column.display != 1) {
							html = '<div class="hui-switch"><span>隐藏</span><div class="hui-switch-in"></div></div>';
						}

						return html;
					},

					onDivSelect: function(index, column) {
						//alert(index);

						if(column.display == 1) {
							column.display = 2;
						} else {
							column.display = 1;
						}
						console.log(this.list[index])
						this.list[index] = column;
					}

				}

			});

			hui.ready(function() {

				var save = localStorage.getItem("columns");

				if(save && save.length > 0) {
					datas.list = JSON.parse(save);

//					printLog(datas.list, "网关列表");
					
				} else {
					hui.upToast("没有找到网关信息!");
				}

			});

			function save() {

				var gids = "";
				datas.list.forEach(function(column) {
					if(column.display == 1) {
						if(gids.length > 0) {
							gids += ",";
						}

						gids += column.Id;
					}
				});

				if(gids.length == 0) {
					hui.toast("请至少显示一个网关!");
					return;
				}

				var userId = getUserId();
				var url = baseURL() + "/users_handler.ashx?action=user_editgateway";
				var param = {
					uid: userId,
					gids: gids
				};

				printLog(url, "修改网关");
				printLog(param, "修改网关参数");

				hui.loading();

				postJson(url, param, function(ret) {
					printLog(ret, "修改网关返回");
					//datas.columns = ret.data;
					hui.toast("设置网关成功!");

					refreshMain();

				});

			}

			function refreshMain() {
				if(!window.plus) {
					return;
				}
				var views = hui.allViews(); 
				for(var k = 0; k < views.length; k++) {
					
					var selfW = views[k];
//					printLog(selfW.id, "界面");
					console.log("界面");
					console.log(selfW.id);
					
					if(selfW.id.indexOf("main_R.html") >= 0) {
						printLog(selfW.id, "主界面");
						selfW.evalJS("refreshColumns();");
//						plus.webview.show(selfW.id); // 显示窗口
					}
				}
			}
		</script>

	</body>

</html>